<template>
  <div>
    <el-form ref="EditForm" :model="formModel" label-width="100px" :rules="validate">

      <el-row>
        <el-col :span="24">
          <el-form-item label="角色名称:" prop="name">
            <el-input
              v-model="formModel.name"
              placeholder="角色名称"
              maxlength="20"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="角色排序:">
            <el-input-number v-model="formModel.sort" style="width: 100%;" :step="1" :max="100" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="角色状态:" prop="status">
            <el-radio-group v-model="formModel.status">
              <el-radio v-for="(value,key,index) in getSystemDictionariesByType('USESTATUS')" :key="index" :label="key" border>{{ value }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单权限:">
            <el-scrollbar wrap-class="scrollbar-wrapper">
              <el-tree
                ref="RolesTree"
                node-key="value"
                class="edit_tree_roles"
                :data="treeResourceData"
                :default-checked-keys="formModel.resources"
                show-checkbox
                accordion
                :props="defaultProps"
              />
            </el-scrollbar>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="角色备注:" prop="remarks">
            <el-input
              v-model="formModel.remarks"
              type="textarea"
              resize="none"
              rows="5"
              placeholder="备注"
              show-word-limit
              maxlength="255"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { listToTree } from 'tree-walk-util'
import { treeResourcesREQ } from '@/api/system/resources'
export default {
  name: 'EditForm',
  components: {},
  props: {
    formModel: {
      type: Object
    },
    validate: {
      type: Object
    }
  },
  data() {
    return {
      treeResourceData: [],
      defaultProps: {
        label: 'text'
      }
    }
  },
  computed: {
    ...mapGetters({
      'getSystemDictionariesByType': 'dictionaries/getSystemDictionariesByType'
    })
  },
  mounted() {
    treeResourcesREQ().then(data => {
      this.treeResourceData = listToTree(data, 'value', 'parentId', 'children').children
    })
  },
  methods: {

  }
}

</script>
<style lang='scss' scoped>
.edit_tree_roles{
  max-height: 300px;
}
</style>
